<style lang="scss" scoped>
    .ui-timeline-item{
        text-align: center;
        width: 150px;
        .mark{
            border-radius: 50%;
            width: 15px;
            height: 15px;
            display: inline-block;
            background-color: #ddd;
            position: absolute;
            top: -7px;
            left: 50%;
            transform: translateX(-50%);
        }
        .line{
            height: 2px;
            background-color: #e4e7ed;
            margin-bottom: 10px;
            margin-top: 10px;
            position: relative;
        }

        .ui-timeline-top{
            padding: 0 10px;
        }
    }
</style>
<template>
    <div class="ui-timeline-item">
        <div class="ui-timeline-top">
            <slot></slot>
        </div>
        <div class="line">
            <i class="mark" :style="{background: color}"></i>
        </div>
        <div class="ui-timeline-bottom">
            <slot name="bottom"></slot>
        </div>
    </div>
</template>
<script>
    export default {
        name:'ui-timeline-item',
        props:['color'],
    }
</script>